<template>
	<view class="e-swipe-action">
		<slot></slot>
	</view>
</template>

<script lang="ts">
	import { defineComponent } from 'vue'
	import mpMixin from '../../libs/mixin/mpMixin'
	/**
	 * SwipeAction 滑动单元格 
	 * @description 该组件一般用于左滑唤出操作菜单的场景，用的最多的是左滑删除操作
	 * @tutorial https://www.uviewui.com/components/swipeAction.html
	 * @property {Boolean}	autoClose	是否自动关闭其他swipe按钮组
	 * @event {Function(index)}	click	点击组件时触发
	 * @example	<e-swipe-action><e-swipe-action-item :rightOptions="options1" ></e-swipe-action-item></e-swipe-action>
	 */
	export default defineComponent({
		name: 'e-swipe-action',
		mixins: [mpMixin]
	})
</script>
<script setup lang="ts">
	import { reactive, provide, toRefs } from 'vue'
	import { swipeActionProps } from './props';
	import { type SwipeActionContext, type SwipeActionItemContext, swipeActionContextKey } from '../../libs/tokens'
	import { useDefaultProps } from '../../libs/hooks'
	import componentsProps from "../../libs/config/componentsProps";
	import type {
		 SwipeActionProps
	} from "../../libs/config/propsType";
	const { swipeAction: swipeActionDefaultProps } = toRefs(componentsProps);

	const _props = defineProps(swipeActionProps)

	const props = useDefaultProps<SwipeActionProps>(_props, swipeActionDefaultProps);

	const children : SwipeActionItemContext[] = []

	const addField : SwipeActionContext['addField'] = (field) => {
		children.push(field)
	}

	const removeField : SwipeActionContext['removeField'] = (field) => {
		let index = children.indexOf(field)
		if (index > -1) {
			children.splice(index, 1)
		}
	}

	const closeOther = (child:SwipeActionItemContext) => {
		if (props.value.autoClose) {
			// 历遍所有的单元格，找出非当前操作中的单元格，进行关闭
			children.map((item, index) => {
				if (child !== item) {
					item.closeHandler()
				}
			})
		}
	}
	
	provide(swipeActionContextKey, reactive({
		props,
		addField,
		removeField,
		closeOther
	}))
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/swipe-action.scss";
</style>
